<script lang="ts" setup>
  import { useAppStore } from '@/store';
  import { onBeforeMount, ref, onMounted } from 'vue';
  import { OperatorItem } from '@/types/operators';
  import { getOperatorDetail } from '@/api/operator';
  import { useRoute } from 'vue-router';
  import { api as viewerApi } from 'v-viewer';
  import OperatorCourse from './course/index.vue';

  const appStore = useAppStore();

  onBeforeMount(() => {
    appStore.updateSettings({
      menu: false,
    });
  });

  const route = useRoute();

  const loadingDetail = ref(false);
  const operatorDetail = ref<OperatorItem | null>(null);
  const initCourseData = async () => {
    try {
      loadingDetail.value = true;
      const res = await getOperatorDetail(route.query.id as string);
      operatorDetail.value = res.data.data || {};

      if (operatorDetail.value.pics) {
        operatorDetail.value.pics = JSON.parse(
          `${operatorDetail.value.pics}` || '[]'
        );
      }
    } finally {
      loadingDetail.value = false;
    }
  };

  onMounted(() => {
    initCourseData();
  });

  const beginViewPics = () => {
    if (operatorDetail.value?.pics) {
      viewerApi({
        images: operatorDetail.value?.pics,
        options: {
          navbar: false,
        },
      });
    }
  };
</script>

<template>
  <div class="main">
    <a-skeleton v-if="loadingDetail" animation>
      <a-space direction="vertical" :style="{ width: '100%' }" size="large">
        <a-skeleton-line :rows="3" />
        <a-skeleton-shape />
      </a-space>
    </a-skeleton>
    <a-row v-else-if="operatorDetail" :gutter="[30, 30]">
      <a-col>
        <div class="header">
          <img :src="operatorDetail.logo" />
          <div>{{ operatorDetail.name }}</div>
          <span>ID: {{ operatorDetail.id }}</span>
        </div>
      </a-col>

      <a-col>
        <div class="section-title">机构介绍</div>
        <a-row :gutter="50">
          <a-col :span="18">
            <div class="common-text">
              {{ operatorDetail.introduction }}
            </div>

            <div class="basic-info-group">
              <div class="basic-info-item">
                <span class="icon"><icon-user /></span>
                <span class="label">联系人：</span>
                <span>{{ operatorDetail.contactName }}</span>
              </div>
              <div class="basic-info-item">
                <span class="icon"><icon-phone /></span>
                <span class="label">联系方式：</span>
                <span>{{ operatorDetail.contactTel }}</span>
              </div>
              <div class="basic-info-item">
                <span class="icon"><icon-email /></span>
                <span class="label">邮箱：</span>
                <span>{{ operatorDetail.contactEmail }}</span>
              </div>
              <div class="basic-info-item">
                <span class="icon"><icon-location /></span>
                <span class="label">详细地址：</span>
                <span>{{ operatorDetail.address }}</span>
              </div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="pic-album" @click="beginViewPics">
              <div
                v-if="operatorDetail.pics.length === 0"
                class="pic-album-empty"
              >
                暂无
              </div>
              <div v-else class="pic-album-pic">
                <img :src="operatorDetail.pics[0]" />
              </div>
              <div class="pic-album-name">
                图集({{ operatorDetail.pics.length }}张)
              </div>
            </div>
          </a-col>
        </a-row>
      </a-col>

      <a-col>
        <OperatorCourse :operator-id="route.query.id as string" />
      </a-col>

      <a-col>
        <div class="section-title">汇款信息</div>
        <div class="basic-table" style="width: 500px">
          <table :cellpadding="0" :cellspacing="0">
            <tr>
              <td class="label">开户行</td>
              <td>{{ operatorDetail.bankName }}</td>
            </tr>
            <tr>
              <td class="label">银行账号</td>
              <td>{{ operatorDetail.bankNumber }}</td>
            </tr>
            <tr>
              <td class="label">账户名称</td>
              <td>{{ operatorDetail.bankAccount }}</td>
            </tr>
          </table>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="less" scoped>
  .main {
    width: 1100px;
    margin: 30px auto;
    background: #fff;
    padding: 20px;
  }

  .header {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    img {
      max-height: 32px;
      margin-right: 10px;
    }
    span {
      font-size: 14px;
      color: var(--color-text-2);
      font-weight: normal;
      margin-left: 10px;
    }
  }

  .common-text {
    line-height: 1.5;
    text-align: justify;
  }

  .basic-table {
    table {
      width: 100%;
      border: 1px solid var(--color-border-2);
      td {
        font-weight: 500;
        padding: 8px 10px;
        border-right: 1px solid var(--color-border-2);
        border-bottom: 1px solid var(--color-border-2);
        &:last-child {
          border-right: none;
        }
        &.label {
          width: 150px;
          background: rgb(var(--gray-1));
          font-weight: normal;
        }
      }
      tr:last-child {
        td {
          border-bottom: none;
        }
      }
    }
  }

  .basic-info-group {
    margin-top: 30px;
  }

  .basic-info-item {
    margin-bottom: 12px;
    display: flex;
    align-items: center;

    .icon {
      margin-right: 3px;
      color: var(--color-text-3);
    }

    .label {
      color: var(--color-text-1);
      width: 100px;
    }
  }

  .pic-album {
    cursor: pointer;
    border: 1px solid var(--color-border-2);

    &-empty {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text-3);
    }

    &-pic {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    &-name {
      line-height: 40px;
      padding: 0 10px;
      text-align: center;
      border-top: 1px solid var(--color-border-2);
      border-bottom: 1px solid var(--color-border-2);
    }
  }
</style>
